<template>

  <div>
    <div class="top">
      <div class="top_top">猫眼电影
        <img src="../img/15.png" alt="">
      </div>
      <div class="top_middle">
        <img class="img noneBg logo_custom" alt="logo"
             src="//p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png@80q" width="42" height="42">
        <span>发现最新最热电影  <span class="sb1">打开App <img class="img noneBg point" alt="logo"
                                                     src="//p0.meituan.net/scarlett/70a18c9d3c345f442e5a4e6bf2d16180779.png@80q"
                                                     width="11" height="11">
        </span></span>
      </div>
      <div class="top_foot">
        <router-link to="/City" >深圳</router-link>
        <div class="dd" :style="a"></div>
        <p @click="move(0)"><router-link to="reying" >热映</router-link></p>
        <p @click="move(1)"><router-link to="yingyuan">影院</router-link></p>
        <p @click="move(2)"><router-link to="daiying">待映</router-link></p>
        <p @click="move(3)"><router-link to="jingdian">经典</router-link></p>
        <li><img
            src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png"
            alt=""></li>
      </div>
    </div>
    <router-view></router-view>
    <div @click="toTop" v-show="gotop"><BackBtn></BackBtn></div>
  </div>
</template>

<script>
//引入返回顶部
import BackBtn from "../BackBtn.vue";
//引入axios
export default {
  name: "Movie",
  data:function (){
    return {
      a:"left: 2.4rem",
      gotop:false
    };
  },
  components:{
    BackBtn
  },
  mounted() {
    window.addEventListener("scroll",this.handleScroll,true);
    console.log(this.$route.path)
    if (this.$route.path==='/home/MovieChild/reying'){
      this.a = "left: 2.4rem";
    }else if (this.$route.path==='/home/MovieChild/yingyuan'){
      this.a = "left: 4.08rem";
    }else if (this.$route.path==='/home/MovieChild/daiying'){
      this.a = "left: 5.813rem";
    }else if (this.$route.path==='/home/MovieChild/jingdian'){
      this.a = "left: 7.52rem";
    }
  },
  methods:{
    move(el){
      if (el==0){
        this.a = "left: 2.4rem";
      }else if (el==1){
        console.log(11)
        this.a = "left: 4.08rem";
      }else if (el==2){
        this.a = "left: 5.813rem";
      }else if (el==3){
        this.a = "left: 7.52rem";
      }
    },
    handleScroll(){
      let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop(){
      let top = document.documentElement.scrollTop || document.body.scrollTop;

      const timeTop = setInterval(()=>{
        document.body.scrollTop = document.documentElement.scrollTop = top -=50;
        if (top <= 0){
          clearInterval(timeTop);
        }
      },10);
    }
  }
}
</script>

<style>
.top{
  width: 100%;
  height: 120px;
  position: fixed;
  margin-bottom: 10px;
  top: 0;
  z-index: 3;
}
.top_top {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #e54847;
  color: white;
  position: relative;
  font-size: 18px;
}

.top_top img {
  width: 22px;
  height: 21px;
  position: absolute;
  top: 13px;
  right: 10px;
}

.top_middle {
  font-size: 14px;
  width: 100%;
  background: white;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #f4f4f4;
}

.top_middle img {
  width: 94px;
  height: 39px;
}

.top_middle .sb1 img {
  width: 12px;
  height: 11px;
}

.top_middle .sb1 {
  font-size: 16px;
  color: #b37e7e;
}

.top_foot {
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #f4f4f4;
  background: white;
}
.top_foot .dd{
  height: 3px;
  width: 20px;
  background: red;
  position: absolute;
  left: 2.4rem;
  top: 153px;
  transition: 0.5s;
}
.top_foot a{
  text-decoration: none;
  color: #666666;
}
.top_foot a.router-link-exact-active{
  color: black;
  font-size: 20px;
  font-weight: bolder;
}

.top_foot li {
  list-style: none;
  color: #666666;
}

.top_foot li img {
  width: 20px;
  height: 20px;
}

</style>